<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
       Span{
            color: red;
        }
    </style>
</head>
<body>
<div align="">
    <h1>  注册</h1>
    <hr>
    <form action="load" id="form01" method="post">
        username:<input type="text" name="username" id="username"/> <span id="usernameSpan"></span>
        <br>
        password:<input type="password" name="password" id="password"/><span id="passSpan"></span>
        <br>
        realName:<input type="text" name="realName"/>
        <br>
        sex:<input type="radio" name="sex" value="男"/>男
        <input type="radio" name="sex" value="女"/> 女
        <br>
        birthday:<input type="date" name="birthday"/><br>
        address:<input type="text" name="address"/>
        <br>
        tel:<input type="text" name="tel"/>
        <br>
        email:<input type="text" name="email"/>
        <br/>
        <input type="button" value="确认提交" id="butt"/><br>
        <span id="buttonSpan"></span>
    </form>
</div>



<script>
    window.onload=function (){
        const usernameSpanError=document.getElementById('usernameSpan');
        const username=document.getElementById('username');
        const pass=document.getElementById('password');
        const passSpanError=document.getElementById('passSpan');

        /*
        * username.onblur
        * */
        username.onblur=function (){
             const  userVal=username.value;
            const userExp=/^[a-zA-Z0-9]+$/;
            if(userVal!=''){
                if(userExp.test(userVal)){
                    if(userVal.length<6||userVal.length>14){
                        usernameSpanError.innerHTML="用户名只能是6-14位";
                    }else{
                        usernameSpanError.innerHTML="";
                    }
                }else{
                    usernameSpanError.innerHTML="用户名只能为数字和字母组成";
                }
            }else{
                usernameSpanError.innerHTML="用户名不能为空";
            }
        }
        /*
        * username.onfocus
        *
        * */
        username.onfocus=function (){
            usernameSpanError.innerHTML='';
            buttonSpanError.innerHTML='';
        }
        /*
   *
   * password.onblur
   *
   * */
        pass.onblur=function (){
            var  passVal=pass.value;
            var passExp=/^[a-zA-Z0-9]+$/;
            if(passVal!=''){
                if(passExp.test(passVal)){
                    if(passVal.length<6||passVal.length>14){
                        passSpanError.innerHTML="密码只能是6-14位";
                    }else{
                        passSpanError.innerHTML="";
                    }
                }else{
                    passSpanError.innerHTML="密码只能为数字和字母组成";
                }
            }else{
                passSpanError.innerHTML="密码不能为空";
            }
        }
        /*
        * pass.onfocus
        *
        * */
        pass.onfocus=function (){
            passSpanError.innerHTML='';
            buttonSpanError.innerHTML='';

        }
        /*
        * 提交键：
        * 当用户名和密码的span为空，才能提交
        *
        * */
        const butt=document.getElementById('butt');
        const buttonSpanError=document.getElementById('buttonSpan');
        const form01=document.getElementById('form01');
        butt.onclick=function (){
            username.focus();
            username.blur();
            pass.focus();
            pass.blur();
            if(usernameSpanError.innerHTML!=''||passSpanError.innerHTML!=''){
                buttonSpanError.innerHTML='注册的用户名或者密码格式不对，请核查';
            }else{
                form01.submit();
            }
        }
    }

</script>
</body>
</html>